<!DOCTYPE html>
<html>
    <head>
        <title>PlayCanvas Examples</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="icon" type="image/png" href="playcanvas-favicon.png" />
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="sidenav-toggle">
            <svg fill="white" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
        </div>
        <div class="sidenav closed"></div>
        <iframe id="example"></iframe>

        <script src="examples.js"></script>
        <script>
            function titleCase(string) {
                let sentence = string.toLowerCase().split('-');
                for(let i = 0; i < sentence.length; i++){
                    sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
                }
                return sentence.join(' ');
            }

            function loadExample(example) {
                let iframe = document.getElementById('example');
                iframe.src = example;
                location.href = location.protocol +'//' +
                                location.host +
                                location.pathname +
                                '#' +
                                example;
            }

            // Load the initial example (loading the first one if none is specified)
            let url = location.href;
            let hashIndex = url.indexOf('#');
            if (hashIndex === -1) {
                loadExample(categories[0].name + '/' + categories[0].examples[0] + '.html');
            } else {
                loadExample(url.substring(hashIndex + 1));
            }

            // Procedurally build the navigation sidebar
            let sidenav = document.querySelector(".sidenav");
            categories.forEach(function (category) {
                let categoryEntry = document.createElement('p');
                categoryEntry.innerText = titleCase(category.name);
                sidenav.appendChild(categoryEntry);

                category.examples.forEach(function (example) {
                    let exampleEntry = document.createElement('a');
                    exampleEntry.addEventListener("click", function (event) {
                        loadExample(category.name + '/' + example + '.html');
                        let activeLink = document.getElementsByClassName("active")[0];
                        activeLink.classList.remove("active");
                        exampleEntry.classList.add("active");
                        sidenav.classList.add("closed");
                    }, false);

                    let currentExample = window.location.hash.substr(1).split("/")[1].split(".")[0];
                    if (example === currentExample) {
                        exampleEntry.classList.add("active");
                    }

                    exampleEntry.innerText = titleCase(example);
                    sidenav.appendChild(exampleEntry);
                });
            });

            // Navigation
            let navigationToggle = document.querySelector(".sidenav-toggle");
            navigationToggle.addEventListener("click", function (event){
                sidenav.classList.toggle("closed");
            })
        </script>
    </body>
</html>
